<template>
	<view>
		<page-header :headInfo="headInfo"></page-header>
		<view class="loveMes">
			<image :src="personal.love_avatarUrl" mode="widthFix"></image>
			<view class="love">
				<view>{{personal.love_nickName}}</view>
				<view v-if="personal.love_gender == 2" class="iconfont icon-nan"></view>
				<view v-else class="iconfont icon-nan1"></view>
			</view>
			
			<view class="us">
				<view>
					<view>{{personal.intimacy}}</view>
					<view>亲密度</view>
				</view>
				<view>
					<view>{{personal.desire_num}}</view>
					<view>愿望</view>
				</view>
			</view>
		</view>
		<view class="layOutBtn" @tap="relieve">解除关系</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headInfo: {
					type: 1,
					title: 'Ta的资料'
				},
				personal:{}
			}
		},
		onLoad() {
			this.infoMes();
		},
		methods: {
			/**
			 * @author smallfour
			 * @description 获取个人信息
			 */
			infoMes:function(){
				this.$api.getMes({}).then(res => {
					if(res.code == 200){
						this.personal = res.data;
					}
				})
			},
			
			
			/**
			 * @author smallfour
			 * @description 解除关系
			 */
			relieve:function(){
				const that = this;
				uni.showModal({
					content: '真的要解除关系吗？不怕被打断腿吗？',
					confirmText:'解解解！',
					cancelText:'我错了',
					success: function (res) {
						if (res.confirm) {
							that.msg('嘿嘿，现在还没解除功能哦')
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.loveMes{
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			box-shadow: 2px 2px 5px #888888;
			border: 2px solid #fff;
			margin-left: calc(50% - 60rpx);
			margin-top: 30rpx;
		}
	}
	
	.loveMes>view{
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}
	.love>view{
		flex:1;
	}
	.love>view:nth-child(1){
		text-align: right;
		padding-right: 20rpx;
	}
	.love>view:nth-child(2){
		padding-left: 20rpx;
	}
	.us{
		padding: 0 140rpx!important;
		margin-top: 30rpx;
		text-align: center;
	}
		
	.us>view{
		flex:1;
	}
	.layOutBtn{
		width:560rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background: #f0f0f0;
		color: #ef6784;
		border-radius: 60rpx;
		position: absolute;
		bottom: 200rpx;
		left: calc(50% - 280rpx);
	}
</style>
